<style>
	/* 简洁的会员关系图样式 */
	.charts-wrapper {
		background: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	}

	.charts-header {
		background: #f8f9fa;
		padding: 15px 20px;
		border-radius: 6px;
		margin-bottom: 20px;
		border: 1px solid #e9ecef;
	}

	.charts-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin: 0 0 15px 0;
	}

	.search-form {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
	}

	.search-form label {
		font-weight: 500;
		color: #555;
	}

	.search-input {
		padding: 6px 12px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 14px;
		width: 120px;
	}

	.search-input:focus {
		outline: none;
		border-color: #007bff;
	}

	.btn {
		padding: 6px 12px;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		cursor: pointer;
		background: #007bff;
		color: white;
		margin-left: 5px;
	}

	.btn:hover {
		background: #0056b3;
	}

	.btn-secondary {
		background: #6c757d;
	}

	.btn-secondary:hover {
		background: #545b62;
	}

	.chart-area {
		border: 1px solid #ddd;
		border-radius: 6px;
		background: #fafafa;
		min-height: 600px;
		position: relative;
	}

	.empty-state {
		text-align: center;
		padding: 100px 20px;
		color: #666;
	}

	.empty-state-icon {
		font-size: 48px;
		color: #ccc;
		margin-bottom: 20px;
	}

	.empty-state-text {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.empty-state-subtext {
		font-size: 14px;
		color: #999;
	}
</style>

<div class="layui-fluid">
	<div class="layui-row">
		<div class="layui-col-md12">
			<div class="charts-wrapper">
				<!-- 头部搜索区域 -->
				<div class="charts-header">
					<div class="charts-title">公排会员关系图</div>
					<div class="search-form">
						<label>会员ID：</label>
						<input type="text" id="member_id_input" class="search-input" value="{$Request.param.mid|default=''}" placeholder="输入会员ID">
						<button class="btn" onclick="searchMember()">查看</button>
						{if $member && $member.up_pid > 0}
						<button class="btn btn-secondary" onclick="goToParent({$member.up_pid})">上一层</button>
						{/if}
					</div>
				</div>

				<!-- 关系图内容区域 -->
				<div class="chart-area">
					{if $member}
					<div id="guanxitu" style="width: 100%; height: {if $deeplevel > 4}{$deeplevel*150}px{else}600px{/if};">
					</div>
					{else}
					<div class="empty-state">
						<div class="empty-state-icon">
							<i class="layui-icon layui-icon-group"></i>
						</div>
						<div class="empty-state-text">暂无会员关系图数据</div>
						<div class="empty-state-subtext">请输入会员ID查看对应的关系图</div>
						<div style="margin-top: 20px;">
							<button class="btn" onclick="searchMember(1)">查看根节点</button>
						</div>
					</div>
					{/if}
				</div>
			</div>
		</div>
	</div>
</div>

<script src="LIAN_JS/echarts.min.js"></script>
<script>
	// 关闭弹窗
	function closeself() {
		var index = parent.layer.getFrameIndex(window.name);
		parent.layer.close(index);
	}

	// 查看会员
	function searchMember(mid) {
		if (!mid) {
			mid = document.getElementById('member_id_input').value;
		}
		
		if (!mid || mid.trim() === '') {
			layer.msg('请输入会员ID');
			return;
		}

		var params = {mid: mid};
		var isOpen = "{:input('param.isopen')}";
		if (isOpen == "1") {
			params.isopen = 1;
		}
		location.hash = ns.hash("lian://shop/member/chartsSimple", params);
	}

	// 跳转到上级
	function goToParent(pid) {
		var params = {mid: pid};
		var isOpen = "{:input('param.isopen')}";
		if (isOpen == "1") {
			params.isopen = 1;
		}
		location.hash = ns.hash("lian://shop/member/chartsSimple", params);
	}

	// 回车搜索
	document.getElementById('member_id_input').addEventListener('keypress', function(e) {
		if (e.key === 'Enter') {
			searchMember();
		}
	});

	{if $member}
	// 会员数据
	var memberData = {:jsonEncode($member)};
	console.log('会员数据:', memberData);

	var dom = document.getElementById("guanxitu");
	if (dom) {
		var myChart = echarts.init(dom);

		var option = {
			tooltip: {
				trigger: 'item',
				formatter: function(params) {
					var data = params.data;
					var html = '<div style="padding: 8px;">';
					html += '<div style="font-weight: bold; margin-bottom: 5px;">' + data.nickname + '</div>';
					html += '<div>会员ID: ' + data.member_id + '</div>';
					html += '<div>推荐人ID: ' + data.pid + '</div>';
					if (data.up_pid && data.up_pid > 0) {
						html += '<div>公排上级ID: ' + data.up_pid + '</div>';
					}
					html += '</div>';
					return html;
				}
			},
			series: [{
				type: 'tree',
				data: [memberData],
				left: '5%',
				right: '5%',
				top: '5%',
				bottom: '5%',
				symbol: function(value, params) {
					if (params.data.headimg && params.data.headimg !== '/static/img/touxiang.png') {
						return 'image://' + params.data.headimg;
					} else {
						return 'circle';
					}
				},
				symbolSize: 50,
				orient: 'vertical',
				expandAndCollapse: true,
				roam: true,
				initialTreeDepth: -1,
				itemStyle: {
					borderColor: '#007bff',
					borderWidth: 2
				},
				lineStyle: {
					color: '#007bff',
					width: 2
				},
				label: {
					position: 'bottom',
					verticalAlign: 'top',
					align: 'middle',
					fontSize: 12,
					color: '#333',
					fontWeight: 'bold',
					offset: [0, 15],
					backgroundColor: 'rgba(255,255,255,0.9)',
					borderColor: '#007bff',
					borderWidth: 1,
					borderRadius: 4,
					padding: [4, 8],
					formatter: function(params) {
						var data = params.data;
						return data.nickname + '\nID:' + data.member_id;
					}
				},
				emphasis: {
					focus: 'descendant'
				},
				animationDuration: 800
			}]
		};

		myChart.setOption(option);

		// 添加点击事件
		myChart.on('click', function(params) {
			if (params.data && params.data.member_id) {
				var clickParams = {mid: params.data.member_id};
				var isOpen = "{:input('param.isopen')}";
				if (isOpen == "1") {
					clickParams.isopen = 1;
				}
				location.hash = ns.hash("lian://shop/member/chartsSimple", clickParams);
			}
		});

		// 窗口大小改变时重新渲染
		window.addEventListener('resize', function() {
			myChart.resize();
		});
	}
	{/if}
</script>
